<template>
  <el-dialog
    title="产品类型分析"
    :visible.sync="visible"
    :append-to-body="true"
    width="825px"
    :before-close="handleClose">
    <div id="pro-chart"></div>
  </el-dialog>
</template>
<script>
  import {productTypeChart} from "../../../api/platform/customerdatatable";
  import {columnBarOption} from "../../../config/chartOption";
  import _ from 'lodash'
  export default {
    name:'pro-type-modal',
    data(){
      return{
        visible:false,
        chart:null
      }
    },
    methods:{
      handleClose(){
        this.visible = false
      },
      showModal(query){
        let params = _.cloneDeep(query)
        if(query.daterange&&query.daterange.length && query.daterange[0]){
          params.startTime = query.daterange[0]
          params.endTime = query.daterange[1]
        }
        this.visible = true
        this.$nextTick(()=>{
          this.chart = this.$echarts.init(
            document.getElementById(`pro-chart`)
          )
        })

        productTypeChart(params).then(res=>{
          console.log(res);

          let option = _.cloneDeep(columnBarOption), yAxis = [],series = [{
            type:'bar',
            barWidth: '30%',
            data:[],
            emphasis: {
              focus: "series",
            },
            itemStyle:{
              barBorderRadius: [0, 40, 40, 40],
              color: () => {
                return new this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [
                  {
                    offset: 0,
                    color: `rgba(20,106,255, 1)`,
                  },
                  {
                    offset: 1,
                    color: `rgba(255,255,255, 0)`,
                  },
                ]);
              },
            }
          }]
          res = res.data.data
          res.forEach(o=>{
            yAxis.push(o.deviceTypeName);
            series[0].data.push(o.actualPrice)
          })
          option.yAxis.data= yAxis;
          option.series = series;
          this.chart.setOption(option,true)
        })
      }
    }
  }
</script>
<style scoped lang="scss">
#pro-chart{
  height: 500px;
}
</style>
